@use "vuepress-shared/styles/reset";
@use "vuepress-shared/styles/svg";

$copy-icon: '<svg viewBox="0 0 24 24" fill="none" height="20" width="20" stroke="rgba(128,128,128,1)" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2"/></svg>';
$copied-icon: '<svg viewBox="0 0 24 24" fill="none" height="20" width="20" stroke="rgba(128,128,128,1)" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4"/></svg>';

:root {
  --copy-icon: #{svg.encode-svg($copy-icon)};
  --copied-icon: #{svg.encode-svg($copied-icon)};
}

div[class][class*="language-"]::before {
  right: 70px;
}

div[class*="language-"] {
  > button.copy {
    @include reset.button;
    position: absolute;
    outline: none;
    cursor: pointer;

    .copy-icon {
      cursor: pointer;
      background-color: currentcolor;

      -webkit-mask-image: var(--copy-icon);
      mask-image: var(--copy-icon);
      -webkit-mask-position: 50%;
      mask-position: 50%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 1em;
      mask-size: 1em;
    }

    &:not(.pure) {
      right: -14px;
      top: -4px;
      z-index: 5;
      width: 2rem;
      height: 2rem;
      padding: 7px 8px;
      border-radius: 50%;

      background: #339af0;
      color: #fff;

      @media (max-width: hope-config.$mobile) {
        right: 0;
        bottom: 0;

        width: 28px;
        height: 28px;
        border-radius: 50% 10% 0;
      }

      &:hover {
        background: #228be6;
      }

      .copy-icon {
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: 1.25rem;

        @media (max-width: hope-config.$mobile) {
          position: relative;
          top: 2px;
          left: 2px;
        }
      }
    }

    &.pure {

      cursor: pointer;
      color: hsla(0, 0%, 54.9%, 0.8);
      transition: color 0.1s;
      position: absolute;
      z-index: 5;
      top: 8px;
      right: 4px;
      font-size: 0.75rem;


      &:hover {
        color: #8c8c8c;
      }


    }


  }



}
